import React from 'react'
import ReactDom from 'react-dom'
import './plan-detail.css'
import {withRouter,} from 'react-router-dom'
import moment from "moment";
import {Modal, Toast} from "antd-mobile";
import {
    buyPlanReq,
    fetchGameDetailReq,
    fetchMarkGameListReq,
    getPlanDetailReq,
    getPlanListReq,
    getUserDetailReq, sendPlanGiftReq, taskInfoReq, zanPlanReq
} from "../../apis/goApis";
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import PlanItem from "../game-room/components/Main/plan/plan_item/plan_item";
import PlanCard from "./plan-card/plan-card";
import 理由bg from "../../res/images/web/plan/装饰卡@2x.png"
import jubaoIcon from "../../res/images/web/plan/jubao@2x.png"
import zanIcon from "../../res/images/web/plan/up@2x.png"
import zanedIcon from "../../res/images/web/plan/up2@2x.png"
import jubaoedIcon from "../../res/images/web/plan/jubao2@2x.png"
import CustomButton from "../../shared-components/CustomButton/CustomBotton";
import LocalStorageService from "../../utils/LocalStorageService";
import GiftPopup from "../game-room/components/Main/chat-room/GiftPopup/GiftPopup";
import Countdown from "./Countdown/Countdown";
import constants, {GiftMapper} from "../../utils/constants";
import Coin from "../../shared-components/Coin/coin";
import 不可选src from "../../res/images/web/plan/选择-不可选@2x.png"
import coinSrc from "../../res/images/web/shared/coin.png"
import zhong_src from "../../res/images/web/plan/中@2x.png"
import wei_zhong_src from "../../res/images/web/plan/未中@2x.png"
// import 选中src from "../"
import 可选src from "../../res/images/web/plan/选择-反选@2x.png"
import 选中src from "../../res/images/web/plan/选择-选中@2x.png"
import lockSrc from "../../res/images/web/plan/锁@2x.png"
import {cleanPlanData,} from "../game-room/components/Main/plan/plan";
import GameAIModel from "../../model/GameAIModel";
import {loseColor, tiedColor, winColor} from "../game-room/components/Main/analysis/companents/RecordTable/RecordTable";
import {formatAsiaOdd, formatAsiaOddToCh} from "../game-room/components/Main/index/AsiaOddsTable/AsiaOddsTable";
import {formatDXQOdd} from "../game-room/components/Main/index/BigSmallTable/BigSmallTable";
import {formatEuroOdds} from "../game-room/components/Main/index/EuroOddsTable/EuroOddsTable";
import PlanPercents from "./PlanPercents/PlanPercents";
import {getDom, log} from "../../utils/commonfunc";
import TaskDoneNotice from "./task-done-notice/task-done-notice";

export const searchObjectFromQuery = string => {
    let o = {}
    const array = string.split('&')
    array.map(pairString => {
        let [key, value,] = pairString.split('=')
        o[key] = value
    })
    return o
}

export const queryFromSearchObj = obj => {
    let query = '?'
    Object.entries(obj).map(([k, v,], index) => {
        let str = `${k}=${v}`
        query += str
        query += '&'
    })
    let final = query.slice(0, query.length - 1)
    return final
}

export const parseFloatToPercent = (float) => {
    if (float === undefined) return ''
    const to2 = float.toFixed(4)
    if (Number.isNaN(to2)) return ''
    const arr = to2.split('.')
    const floatString = arr[1]
    if (floatString === undefined) return ''
    let result = Number(floatString.slice(0, 2))
    const last = Number(floatString.slice(2, 4))
    if (last > 50) {
        result = result + 1
    } else {
        // result = result - 1
    }
    // const result = Number(to2.split('.')[1])
    return result
}
export const getPercentsArrayFromOddsArray = (rateArr, type) => {
    let [r1, r2, r3,] = rateArr
    let v1, v2, v3
    // let parseFloatToPercent = this.parseFloatToPercent
    if (type === 'asia') {
        const total = r1 + r3
        const RQHomeRate = r1
        // const RQDate = RQ[1]
        const RQAwayRate = r3
        let RQHome = parseFloatToPercent(RQAwayRate / total)
        // let RQHome = Number((RQAwayRate / RQTotal).toFixed(2)) * 100
        // console.log(RQHome)
        let RQAway = parseFloatToPercent(RQHomeRate / total)
        if (RQHome === RQAway) {
            if (RQHomeRate > RQAwayRate) {
                RQHome--
                RQAway++
            } else {
                RQHome++
                RQAway--
            }
        }
        v1 = RQHome
        v3 = RQAway
        v2 = 0
    }
    if (type === 'eu') {
        const total = r1 + r2 + r3

        let temp = [...rateArr].slice(0, 3).sort((a, b) => b - a)
        let first = temp[0]
        let second = temp[1]
        let third = temp[2]
        // let total = first + second + third
        let firstPer = parseFloatToPercent(first / total)
        let secondPer = parseFloatToPercent(second / total)
        let thirdPer = parseFloatToPercent(third / total)

        let perArr = []
        let firstIndex = rateArr.findIndex(item => item === first)
        let secondIndex = rateArr.findIndex(item => item === second)
        if (secondIndex === firstIndex) {
            for (let i = 0; i < rateArr.length; i++) {
                let r = rateArr[i]
                if (r === second && i !== firstIndex) {
                    secondIndex = i
                    break
                }
            }
        }
        let thirdIndex = rateArr.findIndex(item => item === third)
        if (thirdIndex === firstIndex || thirdIndex === secondIndex) {
            for (let i = 0; i < rateArr.length; i++) {
                let r = rateArr[i]
                if (r === thirdIndex && i !== firstIndex && i !== secondIndex) {
                    thirdIndex = i
                    break
                }
            }
        }
        if (firstPer === secondPer) {
            firstPer++
            secondPer--
        } else if (secondPer === thirdPer) {
            secondPer++
            thirdPer--
        }
        perArr[firstIndex] = thirdPer
        perArr[secondIndex] = secondPer
        perArr[thirdIndex] = firstPer
        v1 = perArr[0]
        v2 = perArr[1]
        v3 = perArr[2]
    }

    if (type === 'bs') {
        const total = r1 + r3
        const DXQHomeRate = r1
        const DXQAwayRate = r3
        let DXQHome = parseFloatToPercent(DXQAwayRate / total)
        // cons
        // console.log(RQHome)
        let DXQAway = parseFloatToPercent(DXQHomeRate / total)
        v1 = DXQHome
        v3 = DXQAway
        v2 = 0
    }
    const percentArray = [v1, v2, v3,]
    return percentArray
}

const alert = Modal.alert

export const onTaskDone = (uid, task) => {
    return taskInfoReq({Uid: uid, TaskSign: task})
        .then(res => {
            const data = res.data.ok
            return data
        })
}

class PlanDetail extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        const search = this.props.location.search.slice(1)
        const o = searchObjectFromQuery(search)
        const matchId = Number(o.matchId)
        const planId = Number(o.planId)
        this.matchId = matchId
        this.planId = planId
        this.state = {
            // game: null,
            game: {
                State: -1,
                Zhuname: ['', '', '',],
                Kename: ['', '', '',],
                Zhulogo: '',
                Kelogo: '',
                Zhufen: 0,
                Kefen: 0,
                Matchname: ['', '', '',]
            },
            detail: {
                icon: '',
                name: '',
                goodAt: [],
                accuracy: 0,
                read: 0,
                yuceKey: '',
                reason: {
                    title: '',
                    desc: '',
                }
            },
            zan: false,
            jubao: false,
            buy: false,
            user: null,
            modal: {
                gift: false,
            },
            选中爱心: true,
            marked: false,
            list: [],
            p: 0,
            backCount: -1,
            gameModel: null,
            taskDone: false,
            taskInfo: '',
        }
    }

    componentDidMount() {
        // const search = this.props.location.search.slice(1)
        // const o = searchObjectFromQuery(search)
        this.getUser()
            .then(() => {
                // this.getGame(matchId)
                this.getPlan(this.planId)
                this.getMarked()
            })
            .then(() => this.getOthers())
            .then(() => onTaskDone(this.uid, 'ckfa'))
            .then(data => {
                if (data.Code === 0) {
                    this.setState({
                        taskDone: true,
                        taskInfo: data.Msg,
                    })
                }
            })
    }

    // componentDidUpdate(prevProps, prevState, snapshot) {
    //     // console.log(prevProps.location)
    //     // console.log(this.props.location)
    //     console.log('update')
    //     console.log(prevProps.history)
    //     console.log(this.props.history)
    //     const prevSearch = searchObjectFromQuery(prevProps.location.search.slice(1))
    //     const curSearch = searchObjectFromQuery(this.props.location.search.slice(1))
    //     console.log(prevSearch, curSearch)
    //
    //     if (prevSearch.planId !== curSearch.planId) {
    //         this.getPlan()
    //         const count = this.state.backCount
    //         this.setState({
    //             backCount: count + 1,
    //         })
    //     }
    // }

    getGame = (matchId) => {
        fetchGameDetailReq({matchid: matchId})
            .then(resp => {
                if (resp.data.ok) {
                    const gameDetail = JSON.parse(resp.data.ok)
                    this.setState({
                        game: gameDetail,
                    })
                }
            })
    }

    getPlan = (id) => {
        return getPlanDetailReq({
            SchemeId: id,
            Uid: LocalStorageService.get('userid')
        })
            .then((resp) => {
                if (resp.data.ok === 1) {
                    const detail = cleanPlanData(resp.data.scheme)
                    const info = resp.data.hinfo
                    const game = resp.data.scheme
                    this.setState({
                        detail,
                        game,
                        zan: info.findIndex(i => i === 1) > -1,
                        jubao: info.findIndex(i => i === 2) > -1,
                        buy: info.findIndex(i => i === 3) > -1,
                    })
                }
            })
    }

    getOthers = () => {
        const Namiid = parseInt(this.matchId)
        const Mode = 3
        const Limit = 10
        const Offset = this.state.p * Limit
        getPlanListReq({
            Namiid,
            Mode,
            Offset,
            Limit,
        }).then((resp) => {
            // const list = resp.data.ok.filter(plan => plan.Id !== this.state.detail.id)
            const list = resp.data.ok
            this.setState({
                list,
            })
        })
    }

    getMarked = () => {
        const uid = this.uid
        fetchMarkGameListReq({
            uid,
        }).then((resp) => {
            let marked = false
            const list = resp.data.ok
            list.map(idList => {
                if (idList.length > 1) {
                    if (idList.findIndex(id => id === String(this.matchId)) > -1) {
                        marked = true
                    }
                }
            })
            this.setState({
                marked,
            })
        })
    }

    getUser = () => {
        return getUserDetailReq({uid: this.uid,}, false).then(resp => {
            if (resp.data.ok) {
                const myPacket = JSON.parse(resp.data.ok.Packet)
                let heartCount, coin
                if (myPacket) {
                    myPacket.map(([id, n]) => {
                        if (id === 9) {
                            heartCount = n
                        }
                    })
                    coin = resp.data.ok.Gold
                }

                this.setState({
                    user: resp.data.ok,
                    heartCount,
                    coin,
                })
            }
        })
    }

    callGiftModal = () => {
        const user = this.state.user
        const packet = JSON.parse(user.Packet).filter(gift => {
            let g = GiftMapper[`gift_${gift[0]}`]
            if (g && gift[1] !== 0) return true
        })
        const gold = user.Gold
        if (packet.length > 0 || gold > 0) {
            this.setState({
                ...this.state,
                modal: {
                    ...this.state.modal,
                    gift: true,
                }
            })
        } else {
            const title = <div>
                <p>亲爱的用户，背包要有礼物才能打赏</p>
            </div>
            alert(title, '', [
                {
                    text: '去充值',
                    onPress: () => {
                        this.props.history.push('../wallet')
                    },
                },
                {
                    text: '免费获取',
                    onPress: () => {
                        this.props.history.push('../ren_wu')
                    },
                    style: {color: '#FFA500',}
                },
            ])
        }

    }



    zan = () => {
        // Schemeid int    `binding:"required"`
        // Uid      string `binding:"required"`
        // Handle   int    `binding:"required,min=1,max=2"` //1=赞，2=举报
        // Txt      string
        const plan = this.state.detail
        const Schemeid = plan.id
        const Uid = this.uid
        if (this.state.zan) {
            Toast.info('已经赞过', 0.5,)
        } else {
            zanPlanReq({
                Schemeid,
                Uid,
            })
                .then(res => {
                    if (res.data.ok === 1) {
                        Toast.success('点赞成功', 0.5)
                        this.setState({
                            zan: true,
                        })
                    }
                })
        }
    }

    sendGift = (gift) => {
        const log = console.log.bind(console)
        // Uid      string `binding:"required"` //用户id
        // Schemeid int    `binding:"required"` //方案id
        // Suid     string `binding:"required"` //提交改方案的用户id
        // GiftId   int    `binding:"min=1"`    //礼物id
        // Count    int    `binding:"required"` //数量
        log(gift)
        const plan = this.state.detail
        const eventName = this.state.game.Matchname[0]
        const req = sendPlanGiftReq({
            Uid: this.uid,
            Schemeid: plan.id,
            Suid: plan.Uid,
            GiftId: gift.Id,
            Count: gift.giftnum,
            Flag: gift.UsePack ? 1 : 2,
            Matchname: eventName,
        }).then(res => {
            if (res.data.ok) {
                setTimeout(() => {
                    Toast.success('打赏成功', 0.5)
                }, 500)
            } else {
                Toast.fail(constants.ErrorCode[res.data.err], 0.5)
            }
        })
        return req
    }

    callJubao = () => {
        const plan = this.state.detail

        const title = <div>
            <p>确定举报</p>
            <p>该分析内容吗？</p>
        </div>
        alert(title, '', [
            {
                text: '举报',
                onPress: () => {
                    this.props.history.push('../plan_jubao', plan)
                },
            },
            {
                text: '点错了',
                onPress: () => {},
                style: {color: '#333',},
            },
        ])
    }

    parseFloatToPercent = float => {
        // console.log(float)
        if (float === undefined) return ''
        const to2 = float.toFixed(4)
        if (Number.isNaN(to2)) return ''
        const arr = to2.split('.')
        const floatString = arr[1]
        if (floatString === undefined) return ''
        let result = Number(floatString.slice(0, 2))
        const last = Number(floatString.slice(2, 4))
        if (last > 50) {
            result = result + 1
        } else {
            // result = result - 1
        }
        // const result = Number(to2.split('.')[1])
        return result
    }

    buyPlan = () => {
        const plan = this.state.detail
        const price = plan.price
        const user = this.state.user
        const eventName = this.state.game.Matchname[0]
        const packet = JSON.parse(user.Packet).filter(gift => {
            let g = GiftMapper[`gift_${gift[0]}`]
            if (g && gift[1] !== 0) return true
        })
        const gold = user.Gold
        let enough = false
        if (packet.findIndex(gift => gift[0] === 9 && gift[1] > price) > -1) {
            enough = true
        } else if (gold > price) {
            enough = true
        }
        const heart = <img src={GiftMapper['gift_9'].src} alt="" style={{width: 20, height: 20,}}/>
        const coin = <img src={coinSrc} alt="" style={{width: 20, height: 20,}}/>
        if (enough) {
            // SchemeId int    `binding:"required"`
            // Uid      string `binding:"required"`
            // Flag     int    //1=爱心，2=金币


            // this.setState({
            //     ...this.state,
            //     modal: {
            //         ...this.state.modal,
            //         gift: true,
            //     }
            // })

            const title = <div>
                <p>
                    亲爱的用户，是否支付{price}个{this.state.选中爱心 && this.state.heartCount >= 10 ? heart : coin}
                </p>
            </div>
            alert(title, '', [
                {
                    text: '否',
                    onPress: () => {},
                },
                {
                    text: '是',
                    onPress: () => {
                        buyPlanReq({
                            SchemeId: plan.id,
                            Uid: this.uid,
                            Flag: this.state.选中爱心 && this.state.heartCount >= price ? 1 : 2,
                            Matchname: eventName,
                        }).then(resp => {
                            if (resp.data.ok === 1) {
                                this.getPlan(plan.id)
                                Toast.success('购买方案成功', 0.5)
                            } else {
                                Toast.fail(constants.ErrorCode[resp.data.err], 0.5)
                            }
                        })
                    },
                    style: {color: '#FFA500',}
                },
            ])
        } else {
            const title = <div>
                <p>
                    亲爱的用户，购买此方案需支付{price}个
                        <img src={GiftMapper['gift_9'].src} alt="" style={{width: 20, height: 20,}}/>
                    礼物哦～
                </p>
            </div>
            alert(title, '', [
                {
                    text: '去充值',
                    onPress: () => {
                        this.props.history.push('../wallet')
                    },
                },
                {
                    text: '免费获取',
                    onPress: () => {
                        this.props.history.push('../ren_wu')
                    },
                    style: {color: '#FFA500',}
                },
            ])
        }
    }

    onModalClose = (key) => {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false,
            }
        })
    }

    addGoBackCount = () => {
        const count = this.state.backCount
        this.setState({
            backCount: count - 1,
        })
    }

    renderReason = (plan) => {

        const gameState = plan.State
        const isStarted = gameState >= 2
        const isEnd = gameState === 8
        const free = plan.free
        const buy = this.state.buy
        const reason = plan.reason
        const {title, desc,} = reason
        const zhong = plan.right

        const yellowBlock = <div
            style={{
                width: '4px',
                height: '14px',
                background: '#FFA500',
                marginRight: '6px',
            }}
        />
        const resultIcon = isEnd
            ? free || buy
                ? <img className='plan-game-card-zhong-icon' src={zhong ? zhong_src : wei_zhong_src} alt=""/>
                : null
            : null
        const oddsPercentsTemplate = <div
            className='pd-12 pd-t-24px'
            style={{
                position: 'relative',
            }}
        >
            <PlanPercents planData={plan}/>
            {resultIcon}
        </div>


        const titleTemplate = <div style={{position: 'relative', width: 89,}}>
            <img src={理由bg} style={{width: 89, height: 31,}} alt=""/>
            <p className="align-center-vertical-center no-break" style={{color: '#fff',}}>方案详情</p>
        </div>
        const reasonTemplate = desc && <div className='pd-12'>
            <div className="flex mg-b-12px">
                {yellowBlock}
                <p>理由</p>
            </div>
            <p className="mg-b-8px">{title}</p>
            <p
                style={{
                    color: 'rgba(51, 51, 51, 0.8)',
                    lineHeight: '20px',
                }}
            >{desc}</p>
        </div>
        const activeBtnStyle = {
            border: "1px solid #213A4B",
        }
        const buttons = <div className="pd-12">

            <div className="flex-space-between">
                <div
                    className="plan-reason-button flex-center-align-center"
                    style={this.state.jubao ? activeBtnStyle : {}}
                    onClick={this.callJubao}
                >
                    <img src={this.state.jubao ? jubaoedIcon : jubaoIcon} alt=''/>
                    <span>举报</span>
                </div>

                <CustomButton
                    bg="#FFA500"
                    onClick={this.callGiftModal}
                    extrastyle={{
                        flex: 2,
                        margin: '0 8px',
                        letterSpacing: 0,
                    }}
                >
                    <div className="flex-center-align-center">
                        <img alt="" src={coinSrc} style={{width: 17, height: 17, marginRight: '5px',}}/>
                        <span>我要打赏</span>
                    </div>
                </CustomButton>

                <div
                    className="plan-reason-button flex-center-align-center"
                    style={this.state.zan ? activeBtnStyle : {}}
                    onClick={this.zan}
                >
                    <img src={this.state.zan ? zanedIcon : zanIcon} alt=''/>
                    <span>赞</span>
                </div>
            </div>
        </div>

        const 需要购买 = <div
            className="pd-12"
        >
            <div
                className='需要购买-container flex-center-align-center'
            >
                <img src={lockSrc} alt="" style={{width: 16, height: 16, marginRight: '8px',}}/>
                <span style={{color: '#FA7268',}}>购买后可查看分析内容</span>
            </div>
        </div>

        const 不能购买 = <div className="pd-12">
            <div
                className='需要购买-container flex-center-align-center'
                style={{
                    background: gameState === 8 ? '#A3A3A3' : '#FA7268',
                }}
            >
                <span
                    style={{
                        // width: '108px',
                        height: '24px',
                        lineHeight: '24px',
                        color: '#fff',
                        textAlign: 'center',
                        padding: '0 2px',
                    }}
                >已{gameState === 8 ? '完赛' : '开赛'}，不可购买</span>
            </div>
        </div>

        const game = this.state.game
        const modal = new GameAIModel(game)
        const countdown = game && <div className="pd-12">
            <p className="mg-b-8px text-align-center">距离开赛剩余</p>
            <Countdown
                begin={parseInt(moment(new Date()).format('X'))}
                end={modal.detail().schedule}
            />
        </div>

        return <div>
            <div style={{background: '#fff',}} className="mg-b-4px">
                {titleTemplate}
                {free || buy
                    ? oddsPercentsTemplate : null
                }
                {free || buy
                    ? reasonTemplate
                    : isStarted
                        ? 不能购买
                        : 需要购买
                }
                {modal.detail().status === 1 ? countdown : null}
            </div>
            <div>
                {free || modal.detail().status === -1? buttons : null}
            </div>
        </div>
    }

    renderPayBottom = (user) => {
        const heartId = 'gift_9'
        const heartSrc = GiftMapper[heartId].src
        const detail = this.state.detail
        let heartCount = detail.price
        // if (user) {
        //     const myPacket = JSON.parse(user.Packet)
        //     myPacket.map(([id, n]) => {
        //         if (id === 9) {
        //             heartCount = n
        //         }
        //     })
        // }

        const payBottom = <div
            className="fixed-bottom-container flex-space-between-align-center pd-12"
            style={{
                background: '#fff',
                height: 72,
                boxSizing: 'border-box',
                boxShadow: '0px -4px 6px 0px rgba(0, 0, 0, 0.04)',
                zIndex: 2,
            }}
        >
            <div>
                <span className="gray-text mg-b-4px">合计</span>
                <div className="flex-center-align-center" style={{marginBottom: '-5px',}}>
                    <img src={heartSrc} alt='' style={{width: 32, height: 32,}}/>
                    <span
                        style={{
                            fontSize: '24px',
                            lineHeight: '33px',
                            marginLeft: '8px',
                        }}
                    >{heartCount}</span>
                </div>
            </div>
            <div style={{width: '50%',}}>
                <CustomButton
                    onClick={this.buyPlan}
                >
                    确认支付
                </CustomButton>
            </div>
        </div>
        return payBottom
    }

    renderMyCoinAndHeart = (user) => {

        let coin = 0
        let heartCount = 0
        if (user) {
            const myPacket = JSON.parse(user.Packet)
            myPacket.map(([id, n]) => {
                if (id === 9) {
                    heartCount = n
                }
            })
            coin = user.Gold
        }

        let enough = heartCount >= 10
        let 选中 = this.state.选中爱心
        let iconSrc = enough
            ? (
                选中 ? 选中src : 可选src
            )
            : 不可选src

        const containerStyle = {
            padding: '20px 12px',
            background: '#fff',
            marginBottom: '1px',
            height: '56px',
            boxSizing: 'border-box',
        }
        return <>
            <div style={containerStyle} className="flex-space-between-align-center">
                <span>我的余额</span>
                <div>
                    <Coin />
                    <span className="mg-l-4px">{coin}</span>
                </div>
            </div>
            <div style={containerStyle} className="flex-space-between-align-center">
                <div>
                    <span className="gray-text mg-r-8px">我的爱心</span>
                    <span>{heartCount}个</span>
                </div>
                <div
                    onClick={() => {
                        if (enough) {
                            const 选中 = this.state.选中爱心
                            this.setState({
                                选中爱心: !选中,
                            })
                        }
                    }}
                >
                    <img alt="" src={iconSrc} style={{width: 20, height: 20,}} />
                </div>
            </div>
        </>
    }

    renderOdds = (planData) => {
        console.log(planData)
        return null
    }

    render() {

        const history = this.props.history
        const game = this.state.game
        const gameStarted = game?.State > 1
        const plan = this.state.detail
        const curPageId = plan?.id
        const user = this.state.user
        const free = plan ? plan.free : true
        const buy = this.state.buy
        const marked = this.state.marked
        const others = this.state.list.filter(g => g.Id !== parseInt(curPageId))

        const otherPlans = <div style={{marginBottom: '72px',}}>
            <div style={{background: '#fff', marginBottom: '1px', padding: '16px 12px',}}>
                <p>本场比赛其他推荐</p>
            </div>
            {others.map((plan, index) => <PlanItem
                planDate={cleanPlanData(plan)}
                key={index}
                getPagePlan={this.getPlan}
                addGoBackCount={this.addGoBackCount}
                curPageId={curPageId}
            />)}
        </div>

        return <GoBackLayout
            mainTitle="详情"
            history={history}
            backCount={this.state.backCount}
        >
            {this.state.taskDone && <TaskDoneNotice taskInfo={this.state.taskInfo} onCancel={() => this.setState({taskDone: false,})}/>}
            <div className="mg-b-4px">
                {game && <PlanCard
                    game={game}
                    marked={marked}
                    plan={plan}
                    free={free}
                    buy={buy}
                />}
            </div>
            {plan && <PlanItem planDate={plan} fromDetail dontNavigateToDetail/>}
            {plan && this.renderReason(plan)}
            {user && <GiftPopup
                visible={this.state.modal.gift}
                userDetail={user}
                onClose={() => this.onModalClose('gift')}
                onSendGift={this.sendGift}
                fromPlan
            />}
            {free || buy
                ? null
                : this.renderMyCoinAndHeart(user)
            }
            {free || buy || gameStarted
                ? null
                : this.renderPayBottom(user)
            }
            {otherPlans}
        </GoBackLayout>
    }

}

export default withRouter(PlanDetail)